<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        placeholder="What needs to be done?"
        class="new-todo"
        name="inpVal"
        v-model="todoVal"
        @keyup="handelSend"
      />
    </header>
    <section class="main">
      <input
        id="toggle-all"
        name="selectAll"
        type="checkbox"
        class="toggle-all"
        v-model="selectAll"
        @change="handeCheckAll"
      />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          :class="[
            'todo',
            item.isDone ? 'completed' : '',
            editIndex === index ? 'editing' : '',
          ]"
          v-for="(item, index) in showLists"
          :key="item.id"
        >
          <div class="view">
            <input
              type="checkbox"
              class="toggle"
              v-model="item.isDone"
              @change="handelSingleSelect(item.id, $event)"
            />
            <label @dblclick="editTodo(index)">{{ item.title }}</label>
            <button class="destroy" @click="delTodoFn(item.id)"></button>
          </div>
          <input
            type="text"
            class="edit"
            @blur="handelEdit"
            v-model="item.title"
          />
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count">
        <strong>{{ notDoNums }}</strong> items left
      </span>
      <ul class="filters">
        <li v-for="(item, index) in footerLists" :key="item.id">
          <a
            :href="item.href"
            :class="{ selected: showFlag === index }"
            @click="showFlag = index"
          >
            {{ item.title }}
          </a>
        </li>
      </ul>
      <button
        class="clear-completed"
        :style="{ display: doneNums ? 'block' : 'none' }"
        @click="clearDoneTodos"
      >
        Clear completed
      </button>
    </footer>
  </section>
</template>

<script>
import { ref, reactive, computed, onUpdated } from 'vue';
export default {
  setup() {
    let todoVal = ref('');
    let selectAll = ref(false);
    let showFlag = ref(0);
    let editIndex = ref(-1);

    const footerLists = [
      { id: 'All', href: '#/all', title: 'All' },
      { id: 'Active', href: '#/active', title: 'Active' },
      { id: 'Completed', href: '#/completed', title: 'Completed' },
    ];

    const todoObj = reactive({
      lists: [],
    });

    const lists = localStorage.getItem('todos-2022-02-05');
    todoObj.lists = lists ? JSON.parse(lists) : [];

    const handelSend = (e) => {
      const index = todoObj.lists.findIndex(
        (item) => item.title === todoVal.value
      );
      if (todoVal && index === -1 && e.key === 'Enter') {
        todoObj.lists.push({
          id: Date.now(),
          title: todoVal.value,
          isDone: false,
        });
        todoVal.value = '';
      }
    };

    const handeCheckAll = (e) => {
      const checked = e.target.checked;
      //     全选或者是反选
      todoObj.lists.forEach((item) => (item.isDone = checked));
      selectAll.value = checked;
    };

    const handelSingleSelect = (id, e) => {
      // 单选
      todoObj.lists.map((item) => {
        if (item.id === id) {
          return { ...item, isDone: e.target.checked };
        }
        return item;
      });
    };

    const delTodoFn = (id) => {
      if (window.confirm('您确定要删除此项内容吗?')) {
        todoObj.lists = todoObj.lists.filter((item) => item.id !== id);
      }
    };

    const clearDoneTodos = () => {
      if (window.confirm('您确定要删除完成的任务吗?')) {
        todoObj.lists = todoObj.lists.filter((item) => !item.isDone);
      }
    };

    const editTodo = (index) => {
      editIndex.value = index;
    };

    const handelEdit = () => {
      editIndex.value = -1;
    };

    const notDoNums = computed({
      get() {
        return todoObj.lists.reduce(
          (pre, item) => pre + (!item.isDone ? 1 : 0),
          0
        );
      },
    });

    const doneNums = computed({
      get() {
        return todoObj.lists.length - notDoNums.value;
      },
    });

    const showLists = computed({
      get() {
        let list = [];
        switch (showFlag.value) {
          case 0:
            list = todoObj.lists;
            break;
          case 1:
            list = todoObj.lists.filter((item) => !item.isDone);
            break;
          case 2:
            list = todoObj.lists.filter((item) => item.isDone);
            break;
        }
        return list;
      },
    });

    selectAll = computed(
      () => todoObj.lists.length && todoObj.lists.every((item) => item.isDone)
    );

    onUpdated(() => {
      localStorage.setItem('todos-2022-02-05', JSON.stringify(todoObj.lists));
    });
    return {
      todoVal,
      editIndex,
      selectAll,
      notDoNums,
      doneNums,
      showFlag,
      showLists,
      footerLists,
      handelSend,
      handeCheckAll,
      handelSingleSelect,
      delTodoFn,
      clearDoneTodos,
      editTodo,
      handelEdit,
    };
  },
};
</script>

<style>
@import './style/base.css';
@import './style/index.css';
</style>
